<template>
  <div class="order">
    <div class="content">
      <Header title="订单"></Header>
      <van-tabs color="#ffc400">
        <van-tab v-for="(i,index) in navData" :key="index" :title="i">
        <div v-for="(item,index) in store.state.orderListed" :key="index" v-if="i==='全部' && store.state.orderListed.length">
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="描述信息"
            :title="item.tile"
            :thumb="item.pic"/>
        </div>
        <Blank v-else></Blank>
        </van-tab>
      </van-tabs>
    </div>
     <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer.vue'
import Header from '../../components/Header.vue'
import Blank from '../../components/Blank.vue'
import {reactive,toRefs} from 'vue'
import { useStore } from 'vuex';
export default {
  components:{
    Footer,
    Header,
    Blank
  },
  setup() {
    const store=new useStore();
    let data= reactive({
      navData:['全部','交易完成','待付款','待发货','已发货']
    })
    return {
      ...toRefs(data),store
    }
  }
};
</script>

<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>